<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="layui/layui.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">

</head>

<body>
    <div class="layui-container">
        <table class="layui-table ">
            <tbody class="tb">

            </tbody>
        </table>
    </div>
    <script>
        let objs = {
            users: [
                {
                    id: 1001,
                    username: "tom",
                    gender: "男",
                    courseName: "Web前端",
                    className: "wbs22082"
                },
                {
                    id: 1002,
                    username: "alice",
                    gender: "女",
                    courseName: "Web前端",
                    className: "wbs22072"
                }
            ]
        };

        // 定义一个函数，将上述对象作为参数结构到函数中去，函数的功能是
        // 返回结果是：学生姓名XX，性别是XX，班级是XX，课程是XX

        function show({ users }) {
            let str = "";
            for (var i = 0; i < users.length; i++) {
                let { id, username, gender, courseName, className } = users[i];
                str += `学生的姓名是${username},性别是${gender},班级是${className},课程是${courseName}\n`;
            }
            return str;
        }
        let strs = show(objs);
        console.log(strs);


        var users = {
            username: "alice",
            age: 30,
            address: [
                {
                    id: 1001,
                    addName: "第一故乡南京"
                },
                {
                    id: 1002,
                    addName: "第一故乡上海"
                },
                {
                    id: 1003,
                    addName: "第一故乡北京"
                }
            ]
        };

        // 使用赋值解构和模板字符串将该数据中的address展示在一个表格上，使用layui的表格

        let { address } = users;

        let trs="";
        for (var i = 0; i < address.length; i++) {
            let { id, addName } = address[i];
            trs+=`<tr><td>${id}</td><td>${addName}</td></tr>`;

        }
       let tb=document.querySelector(".tb");
       tb.innerHTML=trs;
    </script>
</body>

</html>